<html>
    <head>
        <meta charset="utf-8" />
        <title>通知</title>
    </head>
<style>
    #demo-logs {
        width: 90%;
        height: 100px;
        background-color: #ddd;
        overflow-x: auto;
        padding: 10px;
        margin-top: 10px;
    }
</style>

<body>
    <button id="notify">提醒我！</button>
    <section id="demo-logs"></section>
</body>
<script>
    const demoLogs = document.querySelector("#demo-logs")

    window.addEventListener("load", () => {
        console.log("页面加载完成。", demoLogs)
        const button = document.querySelector("#notify")

        button.addEventListener("click", () => {
            console.log("按钮被点击。")
            if (Notification?.permission === "granted") {
                demoLogs.innerText = "用户授予权限。正在发送通知。\n"
                demoLogs.innerText += `该网站有显示通知的权限。正在显示通知。\n`
                // 如果用户同意接收通知，让我们尝试发送十个通知
                let i = 0
                // 使用时间间隔以避免某些浏览器（包括 Firefox）在特定时间内出现过多通知时会阻止通知
                const interval = setInterval(() => {
                    // 由于 tag 参数，我们应该只能看到“来自 MDN 的第 9 个你好”通知
                    const n = new Notification(`来自 MDN 的第 9 个你好。`, {
                        tag: "soManyNotification",
                    })
                    if (i === 9) {
                        clearInterval(interval)
                    }
                    i++
                }, 200)
            } else if (Notification?.permission !== "denied") {
                demoLogs.innerText += "请求通知许可。\n"
                // 如果用户没有告诉他们是否想要收到通知（注意：由于 Chrome，我们不确定是否设置了权限属性），因此检查“默认”值是不安全的。
                Notification.requestPermission().then((status) => {
                    // 如果用户同意
                    if (status === "granted") {
                        demoLogs.innerText += "用户授予权限。正在发送通知。\n"
                        let i = 0
                        // 使用间隔以避免某些浏览器（包括 Firefox）在特定时间内出现过多通知时会阻止通知
                        const interval = setInterval(() => {
                            // 由于 tag 参数，我们应该只能看到“来自 MDN 的消息 9。”通知
                            const n = new Notification(`来自 MDN 的消息 ${i}。`, {
                                tag: "soManyNotification",
                            })
                            if (i === 9) {
                                clearInterval(interval)
                            }
                            i++
                        }, 200)
                    } else {
                        // 否则，我们可以回退到常规模式的提醒
                        demoLogs.innerText += `用户拒绝了权限请求。\n`
                    }
                })
            } else {
                // 如果用户拒绝收到通知，我们可以回退到常规模式的提醒
                demoLogs.innerText += `该站点没有显示通知的权限。\n`
            }
        })
    })
</script>

</html>